<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left">
        <span>【{{this.$route.query.kindname}}】 类型列表</span>
        <span style="margin-left:5px">
          |
          <el-button @click="back" type="text">返回</el-button>
        </span>
        <span style="margin-left:5px">
          |
          <el-button @click="modify" type="text">添加</el-button>
        </span>
      </div>
      <el-table :data="attrs" border stripe style="width: 100%">
        <el-table-column prop="name" label="名称" style="width: 20%"></el-table-column>
        <el-table-column prop="mulselect" label="多选" style="width: 10%">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.mulselect" size="medium">是</el-tag>
            <el-tag type="warning" v-else size="medium">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="可选值" style="width: 60%"></el-table-column>
        <el-table-column label="操作" style="width: 10%">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button @click="dele(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="添加" :visible.sync="dialog" width="30%" center>
      <el-form :model="form" label-width="80px" ref="form" size="small">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="是否多选" prop="mulselect">
          <el-switch v-model="form.mulselect"></el-switch>
        </el-form-item>
        <el-form-item
          label="可选值"
          :prop="'domains.' + index + '.value'"
          :key="index"
          v-for="(domain, index) in form.domains"
        >
          <el-row>
            <el-col :span="18">
              <el-input v-model="domain.value"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button @click.prevent="removeDomain(index)">删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
          <el-button type="primary" @click="addDomain">添加值</el-button>
          <el-button @click="dialog=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { attributeList, attributeModify, attributeDele } from "@/libs/api.js";
export default {
  methods: {
    dele(row) {
      let ref = this;
      attributeDele(row.id).then(res => {
        this.$util.success();
        var temp = -1;
        for (var i = 0; i < this.attrs.length; i++) {
          if (this.attrs[i].id == row.id) {
            temp = i;
          }
        }
        if (temp != -1) {
          this.attrs.splice(temp, 1);
        }
      });
    },
    modify() {
      this.dialog = true;
      this.$refs["form"].resetFields();
      this.form.domains = [{ value: "" }];
    },
    back() {
      this.$router.push({
        path: "/product/kind"
      });
    },

    edit(row) {
      this.form.name = row.name;
      this.form.mulselect = row.mulselect;
      this.form.id = row.id;
      if (row.value) {
        this.form.domains = [];
        let vs = row.value.split(";");
        for (var i = 0; i < vs.length; i++) {
          if (vs[i]) {
            this.form.domains.push({ value: vs[i] });
          }
        }
      }
      this.dialog = true;
    },
    setAttribute(row) {
      this.$router.push({
        path: "/attribute/" + row.id
      });
    },
    removeDomain(index) {
      this.form.domains.splice(index, 1);
    },
    addDomain() {
      this.form.domains.push({
        value: ""
      });
    },
    onSubmit() {
      this.form.pkId = this.$route.params.pkid;
      if (this.form.domains && this.form.domains.length > 0) {
        let value = "";
        for (var i = 0; i < this.form.domains.length; i++) {
          value += ";" + this.form.domains[i].value;
        }
        if (value.length > 0) {
          value = value.slice(1);
        }
        this.form.value = value;
      }
      attributeModify(this.form).then(res => {
        this.$util.success();

        if (!this.form.id) {
          //添加
          let temp = {
            name: this.form.name,
            mulselect: this.form.mulselect,
            value: res.value,
            id: res.id
          };
          this.attrs.push(temp);
        } else {
          //修改
          if (this.attrs && this.attrs.length) {
            for (var i = 0; i < this.attrs.length; i++) {
              if (this.form.id == this.attrs[i].id) {
                this.attrs[i].name = this.form.name;
                this.attrs[i].mulselect = this.form.mulselect;
                this.attrs[i].value = res.value;
              }
            }
          }
        }
        this.$refs["form"].resetFields();
        this.dialog = false;
      });
    }
  },

  mounted() {
    attributeList(this.$route.params.pkid).then(res => {
      this.attrs = res;
    });
  },

  data() {
    return {
      attrs: [],
      dialog: false,
      form: {
        name: "",
        description: "",
        domains: [
          {
            value: ""
          }
        ]
      }
    };
  }
};
</script>